<template>
	<div>

		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button v-prmis="'config_size_add'" type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('manage.size.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" height="730"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="s_id" label="ID" />
				<el-table-column prop="label" :label="$t('manage.size.tagName')" />

				<el-table-column prop="length" :label="$t('manage.size.sizeLength')">
					<template #default="scope">
						{{ scope.row.length || '0' }} {{ $t('manage.size.pixel') }}
					</template>
				</el-table-column>

				<el-table-column prop="width" :label="$t('manage.size.sizeWidth')">
					<template #default="scope">
						{{ scope.row.width || '0' }} {{ $t('manage.size.pixel') }}
					</template>
				</el-table-column>

				<el-table-column prop="type" :label="$t('manage.size.fileType')">
					<template #default="scope">
						<el-tag :type="scope.row.type == 0 ? '' : scope.row.type == 1 ? 'warning' : 'success'">
							{{ $t(getPlevel.materialtype(scope.row.type, 1)) }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button v-prmis="'config_size_update'" type="primary" size="small"
							@click="modify(scope.row)"><el-icon>
								<EditPen />
							</el-icon></el-button>
						<el-button v-prmis="'config_size_del'" type="danger" size="small"
							@click="del(scope.row.s_id)"><el-icon>
								<Delete />
							</el-icon></el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.sizeinfo" @exposeData="current" @fraction="fraction" />
		</div>

		<el-dialog v-model="data.dialogVisible" :title="$t('manage.size.add')" center width="30%">
			<el-form v-if="data.dialogVisible" :model="data.sizeadd" :rules="data.rules" label-width="100px"
				ref="ruleFormRef">

				<el-form-item :label="$t('manage.size.tagName') + ':'" prop="label">
					<el-input v-model="data.sizeadd.label" :placeholder="$t('message.pleaseEnter')" />
					<span class="text-red-700">*{{ $t('manage.size.note') }}</span>
				</el-form-item>

				<el-form-item :label="$t('manage.size.sizeLength') + ':'" prop="length">
					<el-input v-model.number="data.sizeadd.length" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('manage.size.sizeWidth') + ':'" prop="width">
					<el-input v-model.number="data.sizeadd.width" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('manage.size.fileType') + ':'" prop="type">
					<el-select v-model="data.sizeadd.type" :placeholder="$t('message.pleaseSelect')">
						<el-option v-for="item in getPlevel.materialtype('', 2)" :key="item.value" :label="$t(item.label)"
							:value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="data.dialogVisible = false">{{ $t('public.cancel') }}</el-button>
				</el-form-item>

			</el-form>
		</el-dialog>

	</div>


</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getsize, addsize, updatesize, delsize } from '@/api/manage';
let ruleFormRef = ref<any>()
let data = reactive({
	mtloading: true, // 加载
	dialogVisible: false, // 弹窗
	list: [], // 列表信息
	lookup: [ // 筛选栏
		{ title: $t('manage.size.tagName'), type: 'input', value: '', key: 'label' },
	],
	rules: { // 表单验证
		label: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		length: [
			{ required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
			{ min: 1, type: 'number', message: $t('message.sizeSmall'), trigger: 'blur' }
		],
		width: [
			{ required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
			{ min: 1, type: 'number', message: $t('message.sizeSmall'), trigger: 'blur' }
		]
	},
	sizeadd: { // 添加/修改
		label: '',
		length: '',
		width: '',
		type: 0,
	},
	sizeinfo: { // 筛选数据
		label: '',
		page: 1,
		pageNum: 15
	},
})

// 查询列表
let getsizeinfo = () => {
	data.mtloading = true
	getsize(data.sizeinfo).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.sizeinfo[key] = e[key]
	}
	data.sizeinfo.page = 1
	data.sizeinfo.pageNum = 15
	getsizeinfo()
}

// 页数回调
let current = (e) => {
	data.sizeinfo.page = e
	getsizeinfo()
}

// 条数回调
let fraction = (e) => {
	data.sizeinfo.pageNum = e
	getsizeinfo()
}

// 添加按钮
let add = () => {
	data.sizeadd = {
		label: '',
		length: '',
		width: '',
		type: 0,
	}
	data.dialogVisible = true
}

// 修改按钮
let modify = (e) => {
	data.sizeadd.s_id = e.s_id
	data.sizeadd.label = e.label
	data.sizeadd.length = e.length
	data.sizeadd.width = e.width
	data.sizeadd.type = e.type
	data.dialogVisible = true
}

// 删除按钮
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delsize({ s_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getsizeinfo()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		})
		.catch(err => {
			console.log('取消')
		})

}

// 保存按钮
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid, fields) => {
		if (valid) {
			if (data.sizeadd.s_id == undefined) {
				addsize(data.sizeadd).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						getsizeinfo()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				updatesize(data.sizeadd).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						getsizeinfo()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}
		}
	})
}

getsizeinfo()

</script>
